<template>
	<div class="auth-wrapper">
		<div class="auth-container">
			<div class="form-header">
				<h2>{{ isLogin ? "用户登录" : "用户注册" }}</h2>
				<p>
					{{
						isLogin
							? "欢迎回来，请登录您的账号"
							: "创建新账号，开启您的旅程"
					}}
				</p>
			</div>

			<form @submit.prevent="handleSubmit" class="floating-form">
				<div class="input-group" v-if="!isLogin">
					<input
						id="email"
						v-model.trim="formData.email"
						type="email"
						autocomplete="off"
						required
					/>
					<label for="email">邮箱</label>
					<span class="highlight"></span>
				</div>

				<div class="input-group">
					<input
						id="username"
						v-model.trim="formData.username"
						type="text"
						autocomplete="off"
						required
					/>
					<label for="username">用户名</label>
					<span class="highlight"></span>
				</div>

				<div class="input-group">
					<input
						id="password"
						v-model.trim="formData.password"
						type="password"
						autocomplete="off"
						required
					/>
					<label for="password">密码</label>
					<span class="highlight"></span>
				</div>

				<div class="input-group" v-if="!isLogin">
					<input
						id="confirmPassword"
						v-model.trim="formData.confirmPassword"
						type="password"
						autocomplete="off"
						required
					/>
					<label for="confirmPassword">确认密码</label>
					<span class="highlight"></span>
				</div>

				<div class="error-message" v-if="errorMsg">{{ errorMsg }}</div>

				<button
					type="submit"
					class="submit-btn"
					:disabled="!isFormValid"
				>
					<span>{{ isLogin ? "登录" : "注册" }}</span>
					<i class="arrow-icon"></i>
				</button>

				<div class="form-footer">
					<span>{{ isLogin ? "还没有账号？" : "已有账号？" }}</span>
					<a href="#" @click.prevent="toggleMode">{{
						isLogin ? "立即注册" : "立即登录"
					}}</a>
				</div>
			</form>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, computed } from "vue"
import { useRouter } from "vue-router"

const router = useRouter()
const isLogin = ref(true)
const errorMsg = ref("")

const formData = reactive({
	email: "",
	username: "",
	password: "",
	confirmPassword: "",
})

const isFormValid = computed(() => {
	if (isLogin.value) {
		return formData.username.trim() && formData.password.trim()
	} else {
		return (
			formData.email.trim() &&
			formData.username.trim() &&
			formData.password.trim() &&
			formData.confirmPassword.trim()
		)
	}
})

const toggleMode = () => {
	isLogin.value = !isLogin.value
	errorMsg.value = ""
	// 重置表单数据
	Object.keys(formData).forEach((key) => {
		formData[key] = ""
	})
}

const handleSubmit = async () => {
	try {
		if (!isLogin.value && formData.password !== formData.confirmPassword) {
			errorMsg.value = "两次输入的密码不一致"
			return
		}

		const requestData = isLogin.value
			? { username: formData.username, password: formData.password }
			: {
					email: formData.email,
					username: formData.username,
					password: formData.password,
			  }

		// 预留API接口调用位置
		const response = await fetch(
			`/api/${isLogin.value ? "login" : "register"}`,
			{
				method: "POST",
				headers: {
					"Content-Type": "application/json",
				},
				body: JSON.stringify(requestData),
			}
		)

		//接入接口后删除并恢复注释
		router.push("/")
		/* if (response.ok) {
			const result = await response.json()
			// 登录成功处理
			localStorage.setItem("token", result.token)
			localStorage.setItem("username", formData.username)
			router.push("/")
		} else {
			errorMsg.value = isLogin.value
				? "用户名或密码错误"
				: "注册失败，请重试"
		} */
	} catch (error) {
		errorMsg.value = "网络错误，请检查连接"
	}
}
</script>

<style lang="scss" scoped>
.auth-wrapper {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	// 可以加背景图
	background: url("../assets/login-bg.jpg") no-repeat center center;
	background-size: cover;
	position: relative;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1;
	}
}

.auth-container {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	padding: 40px;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
}

.form-header {
	text-align: center;
	margin-bottom: 30px;

	h2 {
		color: #2c3e50;
		font-size: 24px;
		font-weight: 600;
		margin-bottom: 8px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	p {
		color: #7f8c8d;
		font-size: 14px;
	}
}

.floating-form {
	.input-group {
		position: relative;
		margin-bottom: 24px;

		input {
			width: 100%;
			padding: 12px 0;
			font-size: 16px;
			border: none;
			border-bottom: 1px solid #bdc3c7;
			background: transparent;
			outline: none;
			transition: all 0.3s ease;

			&:focus {
				border-bottom-color: #667eea;

				& + label {
					top: -20px;
					font-size: 12px;
					color: #667eea;
				}

				&:valid + label {
					top: -20px;
					font-size: 12px;
				}
			}

			label {
				position: absolute;
				top: 12px;
				left: 0;
				font-size: 16px;
				color: #95a5a6;
				pointer-events: none;
				transition: all 0.3s ease;
			}

			.highlight {
				position: absolute;
				bottom: 0;
				left: 0;
				height: 2px;
				width: 0;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				transition: all 0.3s ease;
			}

			input:focus ~ .highlight {
				width: 100%;
			}
		}
	}
}
.error-message {
	color: #e74c3c;
	font-size: 14px;
	text-align: center;
	margin: 15px 0;
	padding: 8px;
	background: rgba(231, 76, 60, 0.1);
	border-radius: 4px;
}

.submit-btn {
	width: 100%;
	padding: 12px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&:hover:not(:disabled) {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
	}

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.arrow-icon {
		margin-left: 8px;
		transition: transform 0.3s ease;
	}

	&:hover .arrow-icon {
		transform: translateX(4px);
	}
}

.form-footer {
	text-align: center;
	margin-top: 20px;
	font-size: 14px;

	span {
		color: #7f8c8d;
	}

	a {
		color: #667eea;
		text-decoration: none;
		font-weight: 500;

		&:hover {
			text-decoration: underline;
		}
	}
}

@media (max-width: 768px) {
	.auth-container {
		margin: 20px;
		padding: 30px 25px;
	}
}
</style>
